<template>
  <!-- <div>{{ parent_list }}</div> -->

  <div class="Scenery_info">
    <div class="Scenery_box">
      <!-- <span class="title"> -->
      <!-- 景区名称: -->
      <div class="logo_img">
        <div class="mask"></div>

        <img :src="getImageUrl(parent_list?.src_id)" />
      </div>
      <div class="logo_title">
        <span class="title1">
          景区名称:
          <!-- <dv-decoration3 style="width:250px;height:15px;" /> -->
        </span>
        <p class="info1">{{ parent_list?.DIM_SPOT }}</p>
      </div>
      <dv-decoration3 style="width:250px;height:15px;" />
      <!-- </span> -->
      <!-- <p class="info">{{ parent_list?.DIM_SPOT }}</p> -->
    </div>
    <!-- <div class="Scenery_box">
      <span class="title">
        景区名称:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p class="info">{{ parent_list?.DIM_SPOT }}</p>
    </div>-->
    <!-- <div class="Scenery_box">
      <span class="title">
        营业时间:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p class="info">{{ parent_list?.OPENTIME }}</p>
    </div> -->
    <div class="Scenery_box">
      <span class="title">
        详细地址:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p class="info">{{ parent_list?.LOCATION }}</p>
    </div>

    <div class="Scenery_box">
      <span class="title">
        景区省份-景区城市:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p
        class="info"
      >{{ parent_list?.PROVINCE ? parent_list.PROVINCE :'武汉' }}--{{ parent_list?.CITY }}</p>
      <!-- <h1 class="title">景区城市:</h1> -->
      <!-- <p class="info">{{ parent_list?.CITY }}</p> -->
    </div>
    <!-- <div class="Scenery_box"></div> -->
    <div class="Scenery_box">
      <span class="title">
        景区特征:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p class="info">{{ parent_list?.TGA ? parent_list?.TGA : '无' }}</p>
    </div>
    <!-- <div class="Scenery_box">
      <h1 class="title">营业时间:</h1>
      <p class="info">{{ parent_list?.OPENTIME }}</p>
    </div>-->
    <div class="Scenery_box">
      <span class="title">
        景点介绍:
        <dv-decoration3 style="width:250px;height:15px;" />
      </span>
      <p class="info">{{ parent_list?.INTRO }}</p>
    </div>
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="公告" name="first">
        <div class="Scenery_box">
          <h1 class="title">景区公告:</h1>
          <p class="info">{{ parent_list?.NOTICE ? parent_list.NOTICE : '正在修订中, 稍安互躁。' }}</p>
        </div>
        <!-- <FacilitiesList :city_id_list="city_id_list" /> -->
      </el-tab-pane>
      <el-tab-pane label="营业时间" name="second">
        <div class="Scenery_box">
          <h1 class="title">营业时间:</h1>
          <p class="info">{{ parent_list?.OPENTIME }}</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="优惠政策" name="third">
        <Policy
          :city_id_list="parent_list?.SPOT_ID ? parent_list?.SPOT_ID : parent_list?.DIM_SPOT_ID"
        />
      </el-tab-pane>
      <!-- <el-tab-pane label="评论列表" name="fourth">
            <CommentList :city_id_list="parent_list?.OPENTIME" />
      </el-tab-pane>-->
    </el-tabs>
    <!-- <div class="Scenery_box">
      <h1 class="title">总评论数据：</h1>
      <p
        class="info"
      >{{ parent_list?.SPOT_GRADE_TOP5 ? parent_list?.SPOT_GRADE_TOP5 : parent_list?.GRADE}}条</p>
    </div>-->
    <!-- <div class="Scenery_box">
      <h1 class="title">等级</h1>
      <p class="info">
        <el-rate
          :texts="['超级差', '差', '一般', '良', '优秀']"
          show-text
          disabled
          show-score
          text-color="#A31127"
          score-template="{value} 分"
          v-if="rate_list_fire"
          v-model="rate_list_fire"
          allow-half
        />
        <el-rate
          :texts="['超级差', '差', '一般', '良', '优秀']"
          show-text
          disabled
          show-score
          score-template="{value} 分"
          v-else-if="rate_list"
          v-model="rate_list"
          allow-half
        />
      </p>
    </div>-->
    <!-- <div class="Scenery_box">
      <h1 class="title">热度：</h1>
      <p
        class="info"
      >{{ parent_list?.HOT ? parent_list?.HOT : '0' }}条</p>
    </div>-->
    <!-- <div class="Scenery_box">
      <h1 class="title">总评论数据：</h1>
      <p
        class="info"
      >{{ parent_list?.SUM }}条</p>
    </div>-->
  </div>
</template>

<script setup lang="ts">
import useImageUrl from "@/Hook/useImageUrl";
const activeName = ref("first");
const rate_list = ref(1);
const rate_list_fire = ref(1);
onMounted(() => {
  //   console.log("==", parent_list);
});
const getImageUrl = (item: any) => {
  return useImageUrl("cardimg", item, "png");
};
const props = defineProps<{
  info_data: String;
}>();
const parent_list: Array<any> = ref(props.info_data);
watch(
  () => props.info_data,
  (newValue, oldValue) => {
    if (newValue) {
      parent_list.value = props.info_data;
      if (props.info_data.SPOT_GRADE_TOP5) {
        rate_list_fire.value = props.info_data.SPOT_GRADE_TOP5;
      } else {
        rate_list.value = props.info_data.GRADE;
      }
      // console.log(props.info_data.SPOT_GRADE_TOP5);
    }
  }
);

onMounted(() => {
  // console.log(props.info_data);
});
</script>

<style lang="scss" scoped>
.Scenery_info {
  // background-color: rgb(80, 95, 90);
  // display: block;
  // flex-direction: row;
  // flex-wrap: wrap;
  // padding-top: 30px;
  // margin: 0 auto;
  // margin-top: 30px;
  // overflow-y: scroll;
  // padding: 40px 20px;
  height: 90%;
  width: 90%;
  // justify-content: center;
  // height: auto;
  // margin-bottom: 20px;
  // overflow: hidden;
  // margin-bottom: 140px;
  // margin-left: 20px;
  margin: 0 auto;
  margin-top: 20px;
  .Scenery_box {
    // padding-top: 30px;
    // background-color: rgba(168, 1, 1, 0.8);
    width: 100%;
    // height: 100%;
    display: block;
    flex-direction: row;
    font-size: 15px;
    .logo_img {
      width: 100%;
      border-radius: 20px;
      object-fit: cover;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .logo_img img {
      width: 100%;
      border-radius: 20px;
      object-fit: cover;
      height: 200px;
      // overflow: hidden;
    }
    .mask {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }

      .logo_title{
        position: relative;
        margin-left: 20px;
        margin-top: -160px;
        z-index: 99;
        font-size: 30px;
        color: white;
        margin-bottom: 100px;
      }
    .title {
      display: block;
      color: rgb(4, 4, 4);
      width: 200px;
      font-size: 15px;
      font-weight: 900;
      // border-bottom: 5px solid rgb(0, 255, 200);
      // background-color: aqua;
    }
    .info {
      padding-top: 1px;
      font-size: 15px;
      margin-bottom: 10px;
      color: #000000;
    }
  }
}
:deep(.el-tabs__item) {
  color: #000000;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  color: #ff0a0a;
}
:deep(.el-tabs) {
  background-color: rgba(255, 255, 255, 0.8);
}
</style>